<template>
	<view class="page">
		<view class="page-ctx">
			<view class="tui-top">
				<view class="top-box">
					<view class="status-title">
						{{info.statusInfo||""}}
					</view>
					<view class="status-desc">
						{{status_desc||''}}
					</view>
				</view>
			</view>

			<view class="tui-money">
				<text>退款金额</text>
				<text>￥{{info.money||0}}</text>
			</view>

			<view class="goods_list">
				<view class="h3">
					商品信息
				</view>
				<view class="item-con" v-if="productInfo.id">
					<view @click="toRoute('product/product-detail?id='+productInfo.id)" class="item-con-children">
						<view class="item-con-img">
							<image :src="productInfo.image" mode=""></image>
						</view>
						<view class="item-con-r">
							<text class="title">{{productInfo.title}}</text>
							<text class="subtitle">{{productInfo.keyVals || ''}}</text>
							<view class="item-con-r-bot flex-between">
								<text>￥{{productInfo.priceSale}}</text>
								<text>×{{productInfo.num}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tui-item">
					<text>售后类型</text>
					<text>{{refund_type_map[info.type]}}</text>
				</view>
				<view class="tui-item">
					<text>售后原因</text>
					<text>{{info.reason}}</text>
				</view>
				<view class="tui-item">
					<text>申请时间</text>
					<text>{{info.createdTime}}</text>
				</view>
				<view class="tui-item">
					<text>退货单号</text>
					<text>{{info.sn}}</text>
				</view>
				<view class="remark">
					<view>描述和凭证</view>
					<view class="con">
						{{info.remark||'无'}}
					</view>
					<view class="tui-img" v-if="info.images && info.images.length>0">
						<image v-for="(item,index) in info.images" :src="item" @click="doPreview(index, image, info.images)">
						</image>
					</view>
				</view>
			</view>


			<view class="store-address" v-if="type_title == '退货退款' || type_title == '换货'">
				<view class="tui-type">
					<text>退货方式</text>
					<text>自行寄回</text>
				</view>
				<view class="address" v-if="info.shouhuo_json">
					<text>我的地址</text>
					<view class="address-info">
						<view class="title">
							{{vuex_config.comAddress||""}}
						</view>
						<view class="user">
							<text>{{vuex_config.comTitle||""}} {{vuex_config.comPhone||""}}</text>
						</view>
					</view>
				</view>

				<view class="address">
					<text>退货地址</text>
					<view class="address-info-box flex">
						<view class="address-info">
							<view class="title">
								{{vuex_config.comAddress||""}}
							</view>
							<view class="user">
								<text>{{vuex_config.comTitle||""}} {{vuex_config.comPhone||""}}</text>
							</view>
						</view>
						<view class="icon-box flex-center">
							<image @click="copy_address" src="@/static/common/copy.png"></image>
						</view>
					</view>
				</view>
			</view>


			<view class="box-item box-info" v-if="kuaidiJson.company">
				<view class="info-title">
					邮寄信息
				</view>
				<view class="order-content">
					<view class="item">
						<text class="label"> 快递公司</text>
						<text class="value">{{kuaidiJson.company}}</text>
					</view>
					<view class="item">
						<text class="label">快递单号</text>
						<text class="value">{{kuaidiJson.orderId}}</text>
					</view>
				</view>
			</view>


		</view>


		<w_bottom_safe height="140" />

		<view class="page-foot" v-if="info.statusInfo == '待退货' ||  info.status == 2">
			<view class="safe-fixed-bottom">
				<view class="btns flex-between">
					<view v-if="info.status == 2" class="btn flex-center btn-bg" @click="do_buyer_return_product()">
						邮寄回平台
					</view>
				</view>
			</view>
		</view>


		<!-- <u-popup mode="center" :safeAreaInsetBottom="false" :show="show_return_product_pop"
			@close="show_return_product_pop=false" @open="show_return_product_pop=true">
			<view class="youji-poup">
				<view class="youji-title">
					<text>输入邮寄信息</text>
				</view>
				<view class="youji-item">
					<text>快递公司</text>
					<input v-model="params.kuaidiCompany" placeholder-class="place" placeholder="请输入您邮寄商品的快递公司" />
				</view>
				<view class="youji-item">
					<text>快递单号</text>
					<input v-model="params.kuaidiOrderId" placeholder-class="place" placeholder="请输入您邮寄商品的快递单号" />
				</view>
				<view class="youji-btn">
					<view class="btn-cancel" @click="show_return_product_pop=false">
						取消
					</view>
					<view class="btn" @click="do_submit_return_info()">
						确认
					</view>
				</view>
			</view>
		</u-popup> -->

		<refund_add_express_pop ref="refund_add_express_pop" @confirm="confirmExpress" />
	</view>
</template>


<script>
	import refund_add_express_pop from '@/components/refund/refund_add_express_pop.vue'
	export default {
		components: {
			refund_add_express_pop
		},
		data() {
			return {
				refund_id: '',
				info: {}, //服务单详情
				type: '',
				refund_type_map: {
					1: '仅退款',
					2: '退货退款',
					3: '换货',
				},
				type_title: '',
				//
				// 状态操作
				is_allow_return: false,//是否允许邮寄回商品
				//

				orderId: '',
				is_show: false,
				type: 1, // 1待付款  2带配送 3待提货 4已提货 5退款
				info: {
					pay_info: {}
				},
				productInfo: {},
				kuaidiJson: {},
				status_desc: '', //状态描述
				//

				qrcode: '',
				type_list: [{
						text: '微信支付',
						'value': 1
					},
					{
						text: '余额支付',
						'value': 2
					}
				], //支付方式
				tips: {
					text: '请选择支付方式'
				},
				is_show_pay: false,
				show: false,
				cancel_show: false,
				show_cancelorder: false,
				content: '确定取消该订单吗？',
				fahuo_id: '',

				goodsNum: '',
				imageList: [],
				CurLevel: {}, //会员等级信息
				show_return_product_pop: false,
				params: {
					kuaidiCompany: '',
					kuaidiOrderId: '',
				}
			}
		},
		computed: {},

		onLoad(option) {
			this.refund_id = option.id
			this.type = option.type
			this.type_title = this.refund_type_map[this.type]
			this.setView()
		},
		methods: {
			setView() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_detail',
						id: this.refund_id
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.info = data;
						this.productInfo = data.productInfo || {};
						this.kuaidiJson = data.kuaidiJson || {};


						if (data.status >= 3) {
							if (data.fahuo_info) {
								this.express_getInfo(data.fahuo_info.fahuo_id)
							}
						}
					}
				})
			},

			doPreview(current, image, urls) {
				console.log('图片预览 pic', image)
				// console.log('图片预览 urls', urls)
				uni.previewImage({
					current: current,
					urls: urls,
					indicator: 'default',
					loop: false,
				});
			},

			open() {
				// console.log('open');
			},
			close() {
				this.is_show = false
				// console.log('close');
			},
			cancel_btn() {
				this.show_cancelorder = false
			},
			close_poup() {
				this.is_show = false
			},
			open_poup() {
				this.is_show = true
			},
			copy_order(val) {
				uni.setClipboardData({
					data: val,
					success: function() {
						console.log('success');
					}
				});
			},
			
			copy_address() {
				uni.setClipboardData({
					data: this.vuex_config.comAddress,
					success: function() {
						console.log('success');
					}
				});
			},

			do_submit_return_info() {
				if (!this.params.kuaidiCompany) {
					this.$alert('快递公司不能为空')
					return false;
				}
				if (!this.params.kuaidiOrderId) {
					this.$alert('快递单号不能为空')
					return false;
				}

				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'refund_addKuaidi',
						id: this.refund_id,
						...this.params
					},
				}).then(res => {
					this.$alert(res)
					if (res.code == 200) {
						this.toBack({
							time: 1500
						})
					}
				})
			},

			//
			do_buyer_return_product() {
				this.$refs.refund_add_express_pop.init(this.info)
			},
			confirmExpress() {
				this.setView()
			}
		}
	}
</script>


<style lang="scss">
	page {
		background: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.page {
		.page-ctx {
			padding: 24rpx 32rpx;
		}
	}


	.tui-top {
		background: #CB0011;
		background: transparent;

		.top-box {
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 32rpx 24rpx;


			.status-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #CB0011;
			}

			.status-desc {
				margin-top: 10rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}

		}
	}

	.tui-money {
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		background: #FFFFFF;
		// box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 26rpx 24rpx 22rpx;
	}




	.store-address {
		margin-bottom: 24rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 34rpx 24rpx 22rpx;


		.tui-type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			text {
				&:nth-child(2) {
					font-size: 24rpx;
					color: #9695A3;
				}
			}
		}

		.address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin-top: 32rpx;

			.address-info-box {
				flex: 1;
				overflow: hidden;
			}

			.address-info {
				flex: 1;
				text-align: right;

				.title {
					font-size: 24rpx;
					color: #9695A3;
				}

				.user {
					font-size: 28rpx;
					color: #9695A3;
					text-align: right;
				}


			}

			.icon-box {
				align-self: stretch;
				width: 48rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}


		}
	}




	.order-info {
		margin: 16rpx 32rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 34rpx 24rpx;
	}


	.order-detail-box {
		display: flex;
		flex-direction: column;
		background: $color;
		padding: 34rpx 32rpx;

		.address_con {
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			/deep/.u-count-down__text {
				font-size: 26rpx;
				color: #FFFFFF !important;
			}
		}
	}

	.h3 {
		display: flex;
		font-size: 28rpx;
		color: #000000;
		padding: 0 0 15rpx;
		font-weight: bold;
	}

	.address1 {
		display: flex;
		justify-content: space-between;

		.address-right {
			display: flex;
			justify-content: space-between;
		}
	}

	.address1_l {
		display: flex;
		font-size: 24rpx;
		color: #000000;
	}

	.address_con_t {
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.address_con_l {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-top: 36rpx;
		padding: 20rpx;
	}

	.address_con_r {
		display: flex;
		align-items: center;
	}

	.tihuoma {
		display: flex;
		background: #f51905;
		color: #FFFFFF;
		font-size: 28rpx;
		width: 120rpx;
		justify-content: center;
		padding: 10rpx 0;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
	}

	.address2 {
		display: flex;
		font-size: 24rpx;
		color: #000000;
		flex-wrap: nowrap;
	}

	.address3 {
		flex: 1;
		font-size: 24rpx;
		color: #000000;
	}

	.address-right1 {
		height: 56rpx;
		border: 2rpx solid #777777;
		box-sizing: border-box;
		border-radius: 4rpx;
		margin-right: 24rpx;
		padding: 10rpx 24rpx;
		display: flex;
		font-size: 24rpx;
		justify-content: center;
		align-items: center;
	}

	.goods_list {
		margin-bottom: 24rpx;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		padding: 34rpx 32rpx 0rpx;
	}

	.goods_item_r {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.text2 {
		width: 370rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.goods_item_r1 {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #333333;
	}

	.goods_item_r2 {
		display: flex;
		justify-content: flex-end;
		color: #a3a3a3;
		font-size: 24rpx;
	}

	.goods_item_r3 {
		display: flex;
		color: #a3a3a3;
		font-size: 24rpx;
	}

	.cell_group {
		display: flex;
		flex-direction: column;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
	}

	.cell {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		/* border-bottom: 1px solid #EEEEEE; */
	}

	.cell_price {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cell-line {
		border: 2rpx solid #F5F5F5;
		margin-top: 28rpx;
	}

	.cell-yingfu {
		display: flex;
		justify-content: flex-end;
		margin-top: 32rpx;
		align-items: center;
	}

	.cell-yingfu-money {
		font-size: 36rpx;
		color: #FF0000;

		&::before {
			content: '￥';
			font-size: 28rpx;
		}
	}

	.cell_l {
		display: flex;
		font-size: 26rpx;
		align-items: center;
		color: #8e8e8e;
		min-height: 56rpx;
	}

	.cell_l_font1 {
		font-size: 24rpx;
		font-weight: bold;
		color: #222222;
	}

	.cell_l_font2 {
		font-size: 24rpx;
		color: #222222;
	}

	.cell_r {
		display: flex;
		align-items: center;
		/* font-size: 26rpx;
		color: #333333; */
	}

	.cell_btn {
		display: flex;
		font-size: 24rpx;
		color: #7f7f7f;
		border: 1px solid #EEEEEE;
		padding: 4rpx 20rpx;
		border-radius: 30rpx;
		margin-left: 10rpx;
	}

	.pay-type {
		padding: 30rpx 20rpx;
		margin-top: -127rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}

	.pay-type-right {
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			margin-right: 24rpx;
		}
	}

	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		padding: 20rpx 30rpx 40rpx;
		width: 100%;
		background: #FFFFFF;
		z-index: 1;
		bottom: 0;
		height: 166rpx;
		box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.06);
	}

	.item-con {
		display: flex;
		flex-direction: column;
		padding-bottom: 10rpx;

		/* border-bottom: 1px solid #EEEEEE; */
		.item-con-children {
			display: flex;
			padding-bottom: 20rpx;

			.item-con-img {
				display: flex;

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.item-con-r {
				display: flex;
				width: 460rpx;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: space-between;

				.title {
					width: 500rpx;
					line-height: 50rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 24rpx;
					color: #333333;
				}

				.subtitle {
					font-size: 22rpx;
				}

				.item-con-r-bot {
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						display: flex;
						line-height: 60rpx;
						color: #000000;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.tui-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;

		text {
			&:nth-child(1) {
				font-weight: bold;
				font-size: 24rpx;
				color: #000000;
			}

			&:nth-child(2) {
				font-size: 24rpx;
				color: #9695A3;
			}
		}
	}

	.remark {
		margin-top: 30rpx;
		padding-bottom: 40rpx;

		>view {
			font-weight: bold;
			font-size: 24rpx;
			color: #000000;
		}

		.con {
			font-size: 24rpx;
			color: #9695A3;
			margin-top: 22rpx;
		}

		.tui-img {
			margin-top: 20rpx;

			image {
				width: 190rpx;
				height: 190rpx;
				margin-right: 12rpx;
				margin-bottom: 12rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}

	.info {
		position: relative;
	}

	.flex {
		display: flex;
	}

	/deep/.u-text__value {
		font-size: 22rpx !important;
	}

	.express-reason {
		margin-top: 10rpx;
		font-size: 24rpx;
	}

	.youji-poup {
		padding: 52rpx 24rpx 64rpx;
		width: 686rpx;

		.youji-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}

		.youji-item {
			display: flex;
			align-items: center;
			margin-top: 38rpx;

			text {
				font-size: 24rpx;
				font-weight: bold;
				color: #000000;
				margin-right: 32rpx;
			}

			input {
				flex: 1;
				height: 100%;
				font-size: 24rpx;
				color: #CFD0DF;
			}

			.place {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #CFD0DF;
			}
		}

		.youji-btn {
			margin-top: 60rpx;
			display: flex;

			.btn-cancel {
				background: #F5F7F9;
				flex: 1;
				padding: 22rpx 0 20rpx;
				margin-right: 26rpx;
				text-align: center;
				font-size: 28rpx;
			}

			.btn {
				flex: 1;
				background: #000000;
				color: #FFFFFF;
				font-size: 28rpx;
				padding: 22rpx 0 20rpx;
				text-align: center;
			}
		}
	}




	.box-item {
		margin-bottom: 24rpx;
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.box-info {
		margin-top: 24rpx;

		.info-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.order-content {
			margin-top: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;

				&+.item {
					margin-top: 22rpx;
				}

				.label {
					display: inline-block;
					min-width: 5em;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #9695A3;
				}
			}
		}
	}



	.page-foot {

		.btns {
			width: 100%;

			.btn {
				flex: 1;
				// width: 345rpx;
				height: 80rpx;
				border-radius: 58rpx 58rpx 58rpx 58rpx;
				border: 2rpx solid #EFF1F6;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;


				&+.btn {
					margin-left: 24rpx;
				}

				&.btn-bg {
					background: #CB0011;
					color: #FFFFFF;
				}

				&[disabled] {}


			}
		}

	}
</style>